/* 响应式断点和媒体查询 */

/* 断点定义 */
:root {
  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* 移动端优先的响应式工具类 */

/* 小屏幕 (手机) */
@media (max-width: 639px) {
  .mobile-hidden {
    display: none !important;
  }
  
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-stack {
    flex-direction: column !important;
  }
  
  /* 聊天界面移动端适配 */
  .chat-layout {
    --sidebar-width: 100%;
    --client-info-width: 100%;
    --tabs-width: 100%;
  }
  
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
  }
  
  .mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: var(--z-modal);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }
  
  .mobile-sidebar.open {
    transform: translateX(0);
  }
  
  .mobile-client-info {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 320px;
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--transition-normal);
  }
  
  .mobile-client-info.open {
    transform: translateX(0);
  }
}

/* 平板端 */
@media (min-width: 640px) and (max-width: 1023px) {
  .tablet-hidden {
    display: none !important;
  }
  
  .tablet-stack {
    flex-direction: column !important;
  }
  
  /* 平板端聊天界面适配 */
  .chat-layout {
    --sidebar-width: 240px;
    --client-info-width: 280px;
    --tabs-width: 280px;
  }
  
  /* 平板端可能隐藏客户信息栏 */
  .client-info-collapsible {
    display: none;
  }
  
  .client-info-collapsible.expanded {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: var(--z-fixed);
    box-shadow: var(--shadow-xl);
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .desktop-hidden {
    display: none !important;
  }
  
  .desktop-flex {
    display: flex !important;
  }
  
  /* 桌面端完整布局 */
  .chat-layout {
    --sidebar-width: 280px;
    --client-info-width: 320px;
    --tabs-width: 300px;
  }
}

/* 大屏幕 */
@media (min-width: 1280px) {
  .xl-hidden {
    display: none !important;
  }
  
  /* 大屏幕更宽的布局 */
  .chat-layout {
    --sidebar-width: 320px;
    --client-info-width: 360px;
    --tabs-width: 340px;
  }
}

/* 超大屏幕 */
@media (min-width: 1536px) {
  .xxl-hidden {
    display: none !important;
  }
  
  /* 超大屏幕最宽布局 */
  .chat-layout {
    --sidebar-width: 360px;
    --client-info-width: 400px;
    --tabs-width: 380px;
  }
}

/* 容器查询支持 */
@supports (container-type: inline-size) {
  .chat-container {
    container-type: inline-size;
  }
  
  /* 当聊天容器宽度小于600px时，隐藏客户信息 */
  @container (max-width: 600px) {
    .client-info {
      display: none;
    }
  }
  
  /* 当聊天容器宽度小于400px时，调整消息布局 */
  @container (max-width: 400px) {
    .message-bubble {
      max-width: 90%;
    }
    
    .message-avatar {
      width: 24px;
      height: 24px;
    }
  }
}

/* 打印样式 */
@media print {
  .no-print {
    display: none !important;
  }
  
  .chat-layout {
    background: white !important;
    color: black !important;
  }
  
  .sidebar,
  .client-info,
  .message-input {
    display: none !important;
  }
  
  .message-history {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* 高度媒体查询 - 适配不同屏幕高度 */
@media (max-height: 600px) {
  .short-screen {
    /* 在矮屏幕上减少垂直间距 */
    --spacing-lg: 0.75rem;
    --spacing-xl: 1rem;
    --titlebar-height: 48px;
  }
  
  .message-history {
    /* 在矮屏幕上优化消息历史显示 */
    padding: var(--spacing-sm);
  }
}

/* 横屏模式 */
@media (orientation: landscape) and (max-height: 500px) {
  .landscape-compact {
    --titlebar-height: 40px;
    --spacing-lg: 0.5rem;
  }
  
  .mobile-keyboard-adjust {
    /* 移动端横屏键盘弹出时的调整 */
    height: 50vh;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .touch-device {
    /* 增大触摸目标 */
    --min-touch-target: 44px;
  }
  
  .action-btn,
  .send-btn,
  .attachment-btn {
    min-width: var(--min-touch-target);
    min-height: var(--min-touch-target);
  }
  
  /* 移除hover效果 */
  .hover-effect:hover {
    background: initial;
    transform: none;
  }
}

/* 鼠标设备优化 */
@media (hover: hover) and (pointer: fine) {
  .mouse-device {
    /* 启用精细的hover效果 */
  }
  
  .hover-effect {
    transition: all var(--transition-fast);
  }
  
  .hover-effect:hover {
    transform: translateY(-1px);
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .respect-motion-preference {
    animation: none !important;
    transition: none !important;
  }
  
  .sidebar,
  .client-info,
  .modal {
    transition: none !important;
  }
}

/* 高对比度偏好 */
@media (prefers-contrast: high) {
  .respect-contrast-preference {
    border-width: 2px;
    outline-width: 2px;
  }
}

/* 透明度偏好 */
@media (prefers-reduced-transparency: reduce) {
  .respect-transparency-preference {
    background: var(--color-surface) !important;
    backdrop-filter: none !important;
  }
}